<template>
  <div class="app-container">
    <filter-bar :add="true" :refresh="true" @handleAdd="handleAdd" @handleRefresh="refreshList" />
    <data-table
      :data-source="list"
      :data-config="dataConfig"
      :btn-width="160"
      :type="true"
      :edit="true"
      :del="true"
      :list-loading="listLoading"
      @handleEdit="handleEdit"
      @handleDel="handleDel"
    ></data-table>
    <data-form
      :data-form="dialogForm"
      :data-form-rules="dialogFormRules"
      :form-visible.sync="dialogFormVisible"
      :form-config="dialogConfig"
      :submit-loading="dialogSubmitLoading"
      :title="dialogStatus==='add' ? commonTitle('add') : commonTitle('edit')"
      label-width="80px"
      @formClose="formClose"
      @formSubmit="dialogFormSubmit"
    ></data-form>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="pagination.page"
      :limit.sync="pagination.size"
      @pagination="getList"
    />
    <el-tooltip placement="top" content="Top">
      <back-to-top />
    </el-tooltip>
  </div>
</template>

<script>
import mixin from "@/utils/mixin";
import { commonTitle } from "@/utils/i18n";
import Pagination from "@/components/Pagination";
import { suppplierDataConfig as dataConfig } from "./config";
import DataTable from "@/components/DataTable";
import BackToTop from "@/components/BackToTop";
import { getList, add, edit, del } from "@/api/supplier";
import DataForm from "@/components/DataForm";
import FilterBar from "@/components/FilterBar";

export default {
  name: "Supplier",
  components: {
    BackToTop,
    DataTable,
    Pagination,
    DataForm,
    FilterBar,
  },
  mixins: [mixin],
  data() {
    return {
      filterConfig: dataConfig.filterConfig,
      dataConfig: dataConfig.fields,
      dialogConfig: dataConfig.dialogFields,
      dialogForm: {},
      dialogFormRules: dataConfig.dialogFormRules,
      list: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      const params = {
        ...this.pagination,
      };
      getList(params)
        .then((response) => {
          this.list = response.data.list;
          this.total = response.data.count;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    handleEdit(row) {
      this.dialogForm.id = row.id;
      this.dialogForm.name = row.name;
      this.dialogForm.address = row.address;
      this.dialogForm.remark = row.remark;
      this.dialogForm.qq = row.qq;
      this.dialogForm.deposit = row.deposit;
      this.dialogStatus = "edit";
      this.dialogFormVisible = true;
    },
    handleAdd() {
      this.dialogForm = { ...dataConfig.dialogForm };
      this.dialogStatus = "add";
      this.dialogFormVisible = true;
    },
    dialogFormSubmit(params) {
      this.dialogSubmitLoading = true;
      if (this.dialogStatus === "add") {
        add(params)
          .then((response) => {
            this.dialogFormVisible = false;
            this.dialogSubmitLoading = false;
            this.$message.success(response.msg);
            this.getList();
          })
          .catch(() => {
            this.dialogSubmitLoading = false;
          });
      } else {
        edit(params)
          .then((response) => {
            this.dialogFormVisible = false;
            this.dialogSubmitLoading = false;
            this.$message.success(response.msg);
            this.getList();
          })
          .catch(() => {
            this.dialogSubmitLoading = false;
          });
      }
    },
    handleDel(index, row) {
      del(row.id).then((response) => {
        this.list.splice(index, 1);
        this.$message.success(response.msg);
      });
    },
    refreshList() {
      this.pagination.page = 1;
      this.getList();
    },
    commonTitle,
  },
};
</script>